﻿<%@ Page Language="C#" MasterPageFile="~/Samples/Sample.Master" AutoEventWireup="true" CodeBehind="Tooltips.aspx.cs" Inherits="JQueryControlToolkit.Sample.Web.Samples.Tooltips" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
    <span style="position: absolute; top: 0px; left: 0px">TopLeft</span>
    <span style="position:absolute; top:0px; left:50%">TopCenter</span>
    <span style="position: absolute; top: 0px; right: 0px">TopRight</span>
    <span style="position:absolute; top:50%; left:0px">MiddleLeft</span>
    <span style="position:absolute; top:50%; left:50%">MiddleCenter</span>
    <span style="position:absolute; top:50%; right:0px">MiddleRight</span>
    <span style="position: absolute; bottom: 0px; left: 0px">BottomLeft</span>
    <span style="position:absolute; bottom:0px; left:50%">BottomCenter</span>
    <span style="position: absolute; bottom: 0px; right: 0px">BottomRight</span>
    <div id="tooltip" style="background:red;width:100px;height:40px;">
        Tooltip content with 
        <a href="http://www.google.fr">link</a> 
        <a href="http://www.google.fr">link</a>
        <a href="http://www.google.fr">link</a>
        <a href="http://www.google.fr">link</a>
    </div>

    <script type="text/javascript">
        $("span").tooltip({ tooltipSelector: '#tooltip', parentRelativeSelector: 'body' });
        $('#tooltip').live('positioned', function(source, alignement) { $('body').append(source); });
    </script>
</asp:Content>
